<script setup lang="ts">
	import { computed } from 'vue';
	import { useI18n } from 'vue-i18n';
	const { t, locale } = useI18n()

	const exchangeLanguage = (l : string) => {
		uni.setLocale(l)
		locale.value = l
	}
	const currentLocale = computed(() => locale.value)
	const settingsData = [
		{
			titleItem: true,
			title: "generalSetting.display",
		},
		{
			title: "generalSetting.languages",
			topRadius: true,
			bottomRadius: false,
			showDivider: true,
			route: "/pages/languageSetting/languageSetting",
		},
		{
			title: "generalSetting.fontSize",
			topRadius: false,
			bottomRadius: false,
			showDivider: true,
		},
		{
			title: "generalSetting.useSystemDefaultFont",
			topRadius: false,
			bottomRadius: false,
			showDivider: true,
			enableSwitch: true,
		},
		{
			title: "generalSetting.darkMode",
			topRadius: false,
			bottomRadius: true,
			showDivider: false,
		},
		{
			titleItem: true,
			title: "generalSetting.function",
		},
		{
			title: 'generalSetting.playNoteSoundByDefault',
			topRadius: true,
			bottomRadius: false,
		},
		{
			title: 'generalSetting.allowAutomaticRefresh',
			topRadius: false,
			bottomRadius: false,
			enableSwitch: true,
			desc: 'generalSetting.allowAutomaticRefreshDesc'
		},
		{
			title: 'generalSetting.videoaAndLivesOpenWithDefaultMute',
			topRadius: false,
			bottomRadius: false,
			enableSwitch: true,
		},
		{
			title: 'generalSetting.hdrEffect',
			topRadius: false,
			bottomRadius: false,
			enableSwitch: true,
		},
		{
			title: 'generalSetting.history',
			topRadius: false,
			bottomRadius: true,
			enableSwitch: true,
			desc: "generalSetting.historyDesc",
			showDivider: false,
		},
		{
			titleItem: true,
			title: "generalSetting.other",
		},
		{
			title: 'generalSetting.preUploadVideosBeforePublishing',
			topRadius: true,
			bottomRadius: true,
			enableSwitch: true,
			desc: "generalSetting.reduceWaitTimesForVideoReleases",
			showDivider: false,
		},
	]
</script>
<template>
	<view class="general-setting">
		<com-nav-bar-title title="setting.generalSettings"></com-nav-bar-title>
		<view class="content-scroll-view">
			<view class="content" v-for="menu in settingsData">
				<com-i18n-view :title="menu.title" v-if="menu.titleItem"></com-i18n-view>
				<com-nav-block :title="menu.title" :topRadius="menu.topRadius ?? false"
					:bottomRadius="menu.bottomRadius ?? false" :showDivider="menu.showDivider ?? true" :route="menu.route ?? ''"
					:key="menu.title" :enableSwitch="menu.enableSwitch ?? false" :desc="menu.desc" v-else>
				</com-nav-block>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.general-setting {
		background-color: $common-background-color;
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		
		.content-scroll-view {
			flex: 1;
			overflow: scroll;
			padding-bottom: 150rpx;
		}
		
		.content {
			
		}
	}

	.lang {
		height: 110rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid black;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.icon {
		display: none;
	}

	.is-selected {
		display: block;
	}
</style>